<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>test</title>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <!-- 搜索过滤区域 -->
  <el-row>
    <el-col :span="8">
      <el-select v-model="type" placeholder="类型">
        <el-option label="本科生" value="UNDERGRAD"></el-option>
        <el-option label="研究生" value="GRADUATE"></el-option>
      </el-select>
    </el-col>
    <el-col :span="8">
      <el-select v-model="sortField" placeholder="排序方案">
        <el-option label="学号" value="student_id"></el-option>
        <el-option label="姓名" value="name"></el-option>
        <el-option label="年龄" value="age"></el-option>
        <el-option label="班级" value="classNum"></el-option>
      </el-select>
    </el-col>
    <el-col :span="8">
      <el-select v-model="sortOrder" placeholder="排序方式">
        <el-option label="升序" value="asc"></el-option>
        <el-option label="降序" value="desc"></el-option>
      </el-select>
    </el-col>
  </el-row>
</div>
<script src="https://unpkg.com/element-plus"></script>
<script>
  const {createApp} = Vue;

  createApp({
    data() {
      return {
        type: 'GRADUATE',
        sortField: 'student_id',
        sortOrder: 'asc'
      }
    }
  }).mount('#app')
</script>
</body>
</html>